<template>
  <el-select
    v-model="_value"
    :style="style"
    :placeholder="placeholder || $t('form.selectPlaceholder')"
    :multiple="multiple"
    :clearable="clearable"
    :filterable="filterable"
  >
    <el-option
      v-for="item in options"
      :key="item[defaultProps.value]"
      :label="item[defaultProps.label]"
      :value="item[defaultProps.value]"
    />
  </el-select>
</template>

<script lang="ts" setup>
import { computed, defineEmits, defineProps, PropType } from 'vue'

import IBaseObj from '#/index'

const props = defineProps({
  modelValue: {
    type: [String, Number, Array, Object],
    default: '',
  },
  options: {
    type: Array as PropType<IBaseObj[]>,
    default: () => [],
  },
  defaultProps: {
    type: Object,
    default: () => {
      return {
        label: 'value',
        value: 'code',
      }
    },
  },
  modelValueField: {
    type: String,
    default: '',
  },
  placeholder: {
    type: String,
  },
  multiple: {
    type: Boolean,
    default: true,
  },
  clearable: {
    type: Boolean,
    default: true,
  },
  filterable: {
    type: Boolean,
    default: true,
  },
  style: {
    type: Object,
    default: () => {
      return {
        width: '100%',
      }
    },
  },
})

const emits = defineEmits(['update:modelValue'])

const _value = computed({
  get() {
    // if (props.modelValueField && Array.isArray(props.modelValue)) {
    //   const arr: any[] = []
    //   props.modelValue.forEach((item: any) => {
    //     arr.push(item[props.modelValueField])
    //   })
    //   return arr
    // }
    return props.modelValue
  },
  set(val) {
    console.log('val', val)
    emits('update:modelValue', val)
  },
})
</script>
